<template>
  <div class="big-box-miusic">
    <div class="top">
      <div class="left_list">
        <div class="list_every" v-for="(item, index) in musicList" :key="item.id" @click="playThisMusic(item, index)"
          :class="activeIndex == index ? 'active' : ''">
          <div class="img_song_bg">
            <img :src="item.image" alt="" />
          </div>
          <div class="song_message">
            <div class="name">{{ item.title }}</div>
            <div class="people">{{ item.singer }}</div>
          </div>
        </div>
      </div>
      <div class="right_bg">
        <div class="song_title">{{ musicMessage.title || "暂未播放歌曲" }}</div>
        <div class="song_name">{{ musicMessage.singer || "暂无歌手" }}</div>
        <div class="song_bg">
          <div class="box_bg">
            <img :src="musicMessage.image
          ? musicMessage.image
          : require('../../assets/1.jpg')
          " alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="title_songname">
        <img :src="musicMessage.image ? musicMessage.image : require('../../assets/1.jpg')" alt="" />
        <div class="nowmusic">当前正在播放 {{ musicMessage.title }}</div>
      </div>
      <audio class="audio" controls ref="myAudio" id="myAudio" loop :src="animationUrl.url"></audio>
      <div class="image_contorl">
        <div class="divs">
          <img class="image_contorl_img" src="../../assets/image/Back.png" alt="" />
        </div>
        <div class="divs">
          <img class="image_contorl_img" src="../../assets/image/stop.png" alt="" />
        </div>
        <div class="divs">
          <img class="image_contorl_img" src="../../assets/image/next.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  musicListApi,
  musicAddApi,
  musicUpdateApi,
  musicDeleteApi,
  musicDetailApi,
} from "@/api/index"
export default {
  name: "Music",
  components: {},
  computed: {
    isPlaying() {
      return this.$store.state.isPlaying
    },
    musicUrl() {
      return this.$store.state.musicUrl
    },
  },
  data() {
    return {
      animationUrl: { url: require("../../assets/music/love.mp3") },
      musicList: [],
      musicMessage: {}, //当前音乐的所有信息
      activeIndex: 0
    }
  },
  created() { },
  mounted() {
    // audio.load(); // 重新加载音频
    // audio.play(); // 播放音乐
    // audio.pause(); // 暂停播放
    this.getMusicList()
  },
  methods: {
    getMusicList() {
      musicListApi().then(res => {
        console.log(res)
        if ((res.code = 1)) {
          this.musicList = res.data.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 播放当前这首音乐
    playThisMusic(item, index) {
      this.activeIndex = index
      this.musicMessage = item
      this.animationUrl.url = item.src
      // 播放音乐
      this.playMusic()
    },
    playMusic() {
      this.$refs.myAudio.play()
    },
  },
}
</script>

<style lang="scss" scoped>
.big-box-miusic {
  background-image: url("../../assets//image/music_bg.jpg");
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .top {
    display: flex;
    height: 93%;

    .left_list {
      background-image: url("../../assets/music/002.jpg");
      background-color: rgba(255, 255, 255, 0.5);
      /* 这里的颜色可以根据你的需求调整，rgba的最后一个值是透明度，范围从0（完全透明）到1（完全不透明） */
      background-blend-mode: multiply;
      /* 这里的混合模式可以根据你的需求调整，比如multiply、screen等 */
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // opacity: 0.7;
      width: 30%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;

      .list_every {
        display: flex;
        // padding-bottom: 5px;
        border-bottom: 1px solid #ccc;
        height: 60px;

        .img_song_bg {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          height: 100%;

          img {
            width: 60px;
            height: 100%;
          }
        }

        .song_message {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 10px;

          .name {
            font-size: 18px;
            font-weight: 700;
            // color:skyblue ;
          }

          .people {
            font-size: 14px;
            color: #2c2828;
            margin-top: 5px;
          }
        }
      }

      .active {
        background-color: red;
        // 

        &:hover {
          background-color: #03e9f4;
          color: #050801;
          box-shadow: 0 0 5px #03e9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4;
        }
      }

      /* 利用伪元素::after 定义盒子内容区域 */
      .active::after {
        content: '';
        position: absolute;
        /* 使用css变量定位内容区域位置 */
        left: var(--border-width);
        top: var(--border-width);
        /* 根据css变量设置内容区域的宽高 */
        width: calc(100% - var(--border-width) * 2);
        height: calc(100% - var(--border-width) * 2);
        background: #ccc;
        /* 设置元素层级小于父级元素 使父元素的内容能够显示在该内容区域之上 */
        z-index: -1;
        /* 设置圆角 要比父元素的圆角小一些 */
        border-radius: 6px;
      }

      /* 利用伪元素::before 定义盒子边框区域 */
      .active::before {
        content: '';
        position: absolute;
        /* 利用定位将元素的左上角定位到父元素的中心 */
        left: 50%;
        top: 50%;
        /* 设置该元素的宽高 要大于父元素的宽高 */
        width: 220px;
        height: 220px;
        /* 设置该元素的渐变背景 */
        background: linear-gradient(90deg, #000, yellow 20%);
        /* 设置该元素的层级 要小于用伪元素::after 定义的盒子内容区域 */
        z-index: -2;
        /* 利用动画旋转该元素 */
        animation: rotate1 1.3s linear infinite;
        /* 定义旋转的圆心为元素的左上角 */
        transform-origin: 0 0;
      }

      /* 声明旋转动画 */
      @keyframes rotate1 {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }



    }

    .right_bg {
      width: 70%;

      .song_title {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 4px; // margin-top: 10%;
      }

      .song_name {
        text-align: center;
        font-size: 24px;
        color: #fff;
        margin-top: 10px;
        // margin-top: 10%;
      }

      .song_bg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80%;

        .box_bg {
          width: 300px;
          height: 300px;
          border-radius: 50%;
          overflow: hidden;

          // 让这个图片自动转动
          img {
            width: 100%;
            height: 100%;
            animation: rotate 10s linear infinite;
          }

          @keyframes rotate {
            0% {
              transform: rotate(0deg);
            }

            100% {
              transform: rotate(360deg);
            }
          }
        }
      }
    }
  }

  .bottom {
    height: 7%;
    width: 100%;
    margin-top: 1%;
    background-color: #f1f3f4;
    display: flex;
    justify-content: space-between;

    .title_songname {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      /* 隐藏超出容器的内容 */

      img {
        width: 40%;
        height: 100%;
      }

      div {
        width: 70%;
        height: 100%;
        display: flex;
        // justify-content: center;
        align-items: center;
        margin-left: 20px;
        animation: marquee 5s linear infinite;
      }

      @keyframes marquee {
        0% {
          text-indent: 0%;
          /* 将文本起始位置设置到容器外部 */
        }

        100% {
          text-indent: 100%;
          /* 将文本结束位置设置到容器外部 */
        }
      }
    }

    .audio {
      width: 70%;
      height: 100%;
      flex-shrink: 0;
    }

    .image_contorl {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 10%;
      height: 100%;

      .divs {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .image_contorl_img {
          width: 40%;
          height: 40%;
        }
      }
    }
  }
}
</style>
